<script setup>
  import { onMounted, ref } from 'vue'
  import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh,
  } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'
  import { useUsercodeStore } from '@/store/usercode.js'

  //tab
  const activeIndex = ref(1)
  const txList = ref([])
  const wxList = ref([])
  const currentPage = ref(1)
  function chooseTab(index) {
    txList.value = []
    wxList.value = []
    currentPage.value = 1
    activeIndex.value = index
    if (userCodeStore.usercode.isTrans == 1 && userCodeStore.usercode.token) {
      getdrawList()
    }
  }
  async function getdrawList() {
    const res = await http.request({
      url: '/api/box/boxList',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
        type: activeIndex.value,
        scene: 2,
        keywords: '',
      },
    })
    res.data.forEach((item) => {
      item.ys_time = formatDateTime(parseTime(item.ys_time))
    })
    if (activeIndex.value == 1) {
      txList.value = [...txList.value, ...res.data]
    } else if (activeIndex.value == 2) {
      wxList.value = [...wxList.value, ...res.data]
    }
  }
  //format
  function formatDateTime(dateTimeStr) {
    // 创建一个新的Date对象
    const date = new Date(dateTimeStr)

    // 获取月和日，并确保它们是两位数
    const month = ('0' + (date.getMonth() + 1)).slice(-2)
    const day = ('0' + date.getDate()).slice(-2)

    // 获取小时和分钟，并确保它们是两位数
    const hours = ('0' + date.getHours()).slice(-2)
    const minutes = ('0' + date.getMinutes()).slice(-2)

    // 拼接成所需的格式
    return `${month}/${day} ${hours}:${minutes}`
  }

  //图片数量
  const imgnum = ref(4)

  // 上拉加载
  function refresh() {
    currentPage.value++
    if (userCodeStore.usercode.isTrans == 1 && userCodeStore.usercode.token) {
      getdrawList()
    }
  }

  //跳转天选
  function goTX(id) {
    uni.navigateTo({
      url: `/minePage/presalebox/presaletxbox?id=${id}`,
    })
  }
  //跳转无限
  function goWX(id) {
    uni.navigateTo({
      url: `/minePage/presalebox/presalewxbox?id=${id}`,
    })
  }

  onMounted(() => {
    wxList.value = []
    txList.value = []
    currentPage.value = 1
    if (userCodeStore.usercode.isTrans == 1 && userCodeStore.usercode.token) {
      getdrawList()
    }
  })
</script>

<template>
  <view class="exception-draw">
    <view class="select">
      <view
        class="select-item"
        :class="{ 'select-item-active': activeIndex == 1 }"
        @click="chooseTab(1)"
      >
        天选之人
      </view>
      <view
        class="select-item"
        :class="{ 'select-item-active': activeIndex == 2 }"
        @click="chooseTab(2)"
      >
        无限冲锋
      </view>
    </view>
    <view class="" v-if="activeIndex == 1">
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        style="height: 93vh"
        @scrolltolower="refresh"
      >
        <view class="content-wrap">
          <view
            v-for="item in txList"
            :key="'tx' + item.id"
            class="tx-item"
            @click="goTX(item.id)"
          >
            <view class="top">
              <text style="font-size: 46rpx; color: #725cff">{{
                item.name
              }}</text>
              <view
                style="
                  display: flex;
                  align-items: center;
                  font-size: 28rpx;
                  color: #fff;
                "
              >
                <image
                  style="width: 48rpx; height: 48rpx; margin-right: 8rpx"
                  src="@/static/clock.png"
                  mode=""
                ></image>
                <view class="">
                  {{ item.ys_time }}
                </view>
              </view>
            </view>
            <view class="image-group">
              <view class="img-left">
                <image
                  style="width: 290rpx; height: 290rpx"
                  :src="item.img"
                  mode=""
                ></image>
              </view>
              <view class="img-right">
                <view
                  class="img-item"
                  v-for="good in item.box_goods"
                  :key="'good' + good.id"
                >
                  <image
                    style="
                      width: 140rpx;
                      height: 140rpx;
                      background-color: #fff;
                    "
                    :src="good.img"
                    mode=""
                  ></image>
                </view>
              </view>
            </view>
            <view class="corner">
              <text style="font-size: 28rpx">￥</text>
              <text style="margin-right: 4rpx; font-size: 36rpx">{{
                item.price
              }}</text>
              <text style="font-size: 24rpx">每抽</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="" v-if="activeIndex == 2">
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        style="height: 93vh"
        @scrolltolower="refresh"
      >
        <view class="content-wrap">
          <view
            v-for="item in wxList"
            :key="'wx' + item.id"
            class="wx-item"
            @click="goWX(item.id)"
          >
            <view class="wx-left">
              <image
                style="height: 256rpx; width: 254rpx"
                :src="item.img"
                mode=""
              ></image>
              <view class="wx-left-bottom">
                <image
                  style="width: 48rpx; height: 48rpx; margin-right: 8rpx"
                  src="@/static/clock.png"
                  mode=""
                ></image>
                <view class="" style="">
                  {{ item.ys_time }}
                </view>
              </view>
            </view>
            <view class="wx-right">
              <view style="font-size: 28rpx">{{ item.name }}</view>
              <view class="money" style="color: #eb2c2c">
                <text style="font-size: 20rpx">￥</text>
                <text style="font-size: 30rpx">{{ item.price }}</text>
              </view>
              <view class="reward-list">
                <view style="margin-bottom: 10rpx; font-size: 20rpx"
                  >奖池列表</view
                >
                <view class="scroll-list">
                  <view class="scroll" :style="{ '--imgnum': 6 }">
                    <view
                      class="scroll-item"
                      v-for="goods in [...item.box_goods, ...item.box_goods]"
                      :key="'wxgoods' + goods.id"
                    >
                      <image
                        style="width: 68rpx; height: 68rpx"
                        :src="goods.img"
                        mode=""
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- <y-tabs v-model="activeIndex" sticky @change="chooseTab">
			<y-tab class="y-tab-virtual" :title="'天选之人'" name="1">
			</y-tab>
			<y-tab class="y-tab-virtual" :title="'无限冲锋'" name="2">
			</y-tab>
		</y-tabs> -->
  </view>
</template>

<style lang="scss" scoped>
  .exception-draw {
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    .select {
      display: flex;
      align-items: center;
      padding: 20rpx;
      font-size: 26rpx;
      color: #898989;
      .select-item {
        width: 146rpx;
      }
      .select-item-active {
        color: $all-color;
      }
    }
    /* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
    .y-tab-virtual {
      position: relative;
      flex-shrink: 0;
      width: 100%;
      height: 100%;
    }

    .content-wrap {
      height: 100%;
      padding: 0rpx 20rpx 0rpx 20rpx;
      // overflow-y: auto;
      // overflow-x: hidden;
      box-sizing: border-box;
      .tx-item {
        position: relative;
        height: 424rpx;
        margin-bottom: 30rpx;
        padding: 24rpx 28rpx 0 24rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txbg.png')
          no-repeat;
        background-size: 100%;
        box-sizing: border-box;
        .top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: start;
        }
        .image-group {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          .img-left {
            height: 290rpx;
            border-radius: 24rpx;
            margin-right: 22rpx;
            overflow: hidden;
            flex-shrink: 0;
            background-color: #fff;
          }
          .img-right {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            .img-item {
              width: 140rpx;
              height: 140rpx;
              border-radius: 12rpx;
              overflow: hidden;
            }
          }
        }
        .corner {
          position: absolute;
          left: 0;
          bottom: 4rpx;
          width: 183rpx;
          height: 68rpx;
          border-radius: 0rpx 24rpx 0rpx 18rpx;
          background-color: #fd40a2;
          color: #fff;
          line-height: 68rpx;
          text-align: center;
        }
        &:last-child {
          margin-bottom: 300rpx;
        }
      }
      .wx-item {
        display: flex;
        align-items: center;
        height: 256rpx;
        margin-bottom: 26rpx;
        // background-color: pink;
        .wx-left {
          position: relative;
          margin-right: 22rpx;
          border-radius: 6rpx;
          overflow: hidden;
          .wx-left-bottom {
            position: absolute;
            bottom: 12rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 254rpx;
            height: 60rpx;
            background-color: rgba(0, 0, 0, 0.3);
            color: white;
          }
        }
        .wx-right {
          height: 100%;
          width: 62%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .reward-list {
            width: 100%;
            height: 128rpx;
            padding: 12rpx 0 0 4rpx;
            border-radius: 4rpx;
            background-color: #f9fafc;
            box-sizing: border-box;
            .scroll-list {
              width: 430rpx;
              overflow: hidden;
              // width: calc(72rpx * var(--imgnum));
              .scroll {
                height: 84rpx;
                display: flex;
                // width: calc(72rpx * var(--imgnum));
                animation: scroll 20s linear infinite;
                .scroll-item {
                  width: 72rpx;
                  height: 72rpx;
                  // margin: 3rpx;
                  border-radius: 6rpx;
                  flex-shrink: 0;
                  overflow: hidden;
                  box-sizing: border-box;
                }
              }
            }
          }
        }

        &:last-child {
          margin-bottom: 300rpx;
        }
      }
    }
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(
          calc(-426rpx)
        ); /* 单个图片宽度 * 图片数量的一半 */
      }
    }
  }
</style>
